<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>V3</title>   
  </head>
  <body>
    <div id="app">  
      <div>Picked: {{ picked }}</div>

      <input type="radio" id="one" value="One" v-model="picked" />
<label for="one">One</label>

<input type="radio" id="two" value="Two" v-model="picked" />
<label for="two">Two</label>

      {{ checkedNames }}
     
      <input type="checkbox" id="jack" value="Jack"  v-model="checkedNames">
      <label for="jack">Jack</label>
      <input type="checkbox" id="John" value="John" v-model="checkedNames">
      <label for="John">John</label>
      <input type="checkbox" id="Mike" value="Mike" v-model="checkedNames">
      <label for="Mike">Mike</label>
    </div>   
  </body>
</html>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
   
  const { createApp } = Vue;
  createApp({    
    data() {
      return {  
        picked: 'One',     
        checkedNames:['Jack','Mike']
      };
    },   
  }).mount("#app");
</script>
